<template>
    <!-- 标讯 -->
    <div class="collect-info" v-loading="loading">

        <center-item 
            class="items" 
            :itemList="itemList" 
            @getdata="afterCollect"
        ></center-item>

        <empty-list v-if="!itemList.length">
            <span>暂无数据</span>
        </empty-list>

        <div class="pagination">
            <my-pagination 
                ref="page" 
                v-model="tableData" 
                :action="`${$store.state.api.tbUrl}/center/usercollects.json`" 
                :loading.sync="loading"
                :search="pgData" 
                :autoShow="false"
            ></my-pagination>
        </div>

    </div>

</template>

<script>
import CollectItem from './item.vue';
import EmptyList from '@components/sys/empty-list';
import centerItem from './center-item.vue';

export default {
    components: { CollectItem, EmptyList, centerItem },
    data() {
        return {
            loading: false,
            tableData: [],
            pgData: {
                pagesize: 5,
                sortname: 'addtime',
                type: 'bx',
            },
        };
    },
    computed: {
        itemList() {
            if (this.tableData.length > 0) {
                let arr = this.tableData.map(function (val) {
                    return {
                        ...val,
                        collectinfo: {
                            isoperated: true,
                        },
                    };
                });

                return arr;
            } else {
                return [];
            }
        },
    },
    methods: {
        afterCollect() {
            this.$refs.page.queryData();
            // ShowMsg('取消成功', 'success', function () {});
        },
        // getdata(){
        //     // this.$fers.
        //     this.$refs.page.queryData();
        // },
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.collect-info {
    height: 442px;
    position: relative;
    overflow: hidden;
    .items {
        margin-top: 20px;

        &:first-child {
            margin-top: 0;
        }
    }
    .pagination {
        position: absolute;
        bottom: 0;
        right: 0;

        .my-pagination-con {
            text-align: right;
        }
    }
}
</style>